<template>
	<el-container>
		<!-- aside -->
		<el-aside width="200">
			<h1 class="logo"></h1>
			<el-menu :collapse="collapse"
				class="el-qf-menu"
				:default-active="$route.path">
				<qf-sub-menu :sideMenu="sideMenu"></qf-sub-menu>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- header -->
			<el-header>
				<el-row type="flex"
					class="row-bg"
					justify="space-between">
					<el-col :span="6">
						<div class="grid-content left">
							<i @click="collapse = !collapse"
								:class="['iconfont', collapse ? 'icon-fold-right' : 'icon-shouqi1']"></i>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content center">CRM系统</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content right">
							<el-avatar shape="square"
								:size="40"
								:src="avatarUrl"></el-avatar>

							<b>
								<svg class="icon"
									v-if="userInfo.vipLevel"
									aria-hidden="true">
									<use :xlink:href="'#' + vipIconName"></use>
								</svg>
								<el-dropdown placement="bottom"
									@command="command">
									<span class="nickname"
										:class="vipIconName + '-i'">
										{{ userInfo.nickname }}
										<i style="color: #fff"
											class="iconfont icon-down"></i>
									</span>
									<el-dropdown-menu>
										<el-dropdown-item divided
											command="charge"
											v-if="userInfo.vipLevel"
											icon="iconfont icon-VIP4">vip到期时间:<br />{{ vipExpries }}</el-dropdown-item>
										<el-dropdown-item divided
											command="charge"
											icon="iconfont icon-VIP4">vip充值</el-dropdown-item>
										<el-dropdown-item divided
											command="mine"
											icon="iconfont icon-icon-test">账号信息</el-dropdown-item>
										<el-dropdown-item divided
											command="product"
											icon="iconfont icon-shangpinguanli">项目管理</el-dropdown-item>
										<el-dropdown-item divided
											icon="iconfont icon-tuichu2"
											@click.native="quit">退出</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</b>
							&nbsp;
							<!-- <b @click="quit"
								class="quit">退出</b> -->
						</div>
					</el-col>
				</el-row>
			</el-header>
			<!-- main -->
			<el-main>
				<!-- 面包屑 -->
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ name: bread.name }"
						v-for="bread in breadCrumb"
						:key="bread.name">
						{{ bread.meta.name }}
					</el-breadcrumb-item>
				</el-breadcrumb>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	import { mapState } from "vuex";
	import moment from "moment";
	export default {
		computed: {
			...mapState(["userInfo", "sideMenu", "breadCrumb"]),
			vipExpries() {
				//vip过期时间
				let stamp = this.userInfo.vipStamp;
				let date = moment(stamp).format("YYYY-MM-DD HH:mm:ss");
				return date;
			},
			vipIconName() {
				//计算vip图标名称
				let { vipLevel } = this.userInfo;
				if (vipLevel === 1) {
					return "icon-vip";
				} else if (vipLevel === 2) {
					return "icon-vip2";
				} else if (vipLevel === 3) {
					return "icon-vip_3";
				} else {
					return "";
				}
			},
			avatarUrl() {
				//如果用户没有头像,就使用默认头像,如果有,就使用用户头像;
				return this.userInfo.headimgurl
					? this.userInfo.headimgurl
					: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
			},
		},
		mounted() { },

		data() {
			return {
				collapse: false,
			};
		},
		methods: {
			//command 右上角用户下拉菜单触发事件
			command(routerName) {
				//routerName就是下拉菜单传入的路由名字
				if (routerName) {
					this.$router.push({ name: routerName });
				}
			},
			cancel() {
				//取消,中断请求
				this.cancelToken();
			},
			quit() {
				//退出登入
				//1.清除token
				localStorage.removeItem("qf-token");
				//2.跳转到登入页
				this.$router.push("/login");
				//3.刷新页面
				location.reload();
			},
		},
	};
</script>
<style scoped lang="less">
.icon-vip-i,
.icon-vip2-i,
.icon-vip_3-i {
	color: #f4c14f !important;
	font-weight: bolder !important;
}
.icon {
	width: 5em;
	height: 1.5em;
	vertical-align: middle;
}
.el-dropdown-menu,
.el-dropdown-menu__item,
.el-dropdown-menu__item--divided:before {
	background-image: linear-gradient(
		135deg,
		rgb(76, 103, 255),
		rgb(86, 53, 223)
	);
	color: #fff;
	text-align: center;
	font-weight: bolder;
}
.el-dropdown-menu {
	width: 200px;
}
.el-header {
	min-height: 60px !important;
	background: linear-gradient(135deg, #4c67ff, #5635df);
	color: #fff;
	font-weight: bolder;
	text-align: center;
	// line-height: 60px;
	line-height: 40px;
	.left {
		text-align: left;

		i {
			font-size: 30px;
			cursor: pointer;
		}
	}
	.center {
		font-size: 30px;
	}
	.el-avatar {
		vertical-align: middle;
		margin-right: 10px;
	}
	.quit {
		color: deeppink;
		text-decoration: underline;
		cursor: pointer;
	}
	.nickname {
		margin-left: 5px;
		color: #fff;
		cursor: pointer;
	}
}

.el-aside {
	background: linear-gradient(135deg, #4c67ff, #5635df);
	color: #333;
	text-align: center;
	// line-height: 200px;
	.logo {
		min-height: 60px;
		background-image: url(http://chst.vip:8081/stu2/img/logo.be8bbddf.png);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position-y: center;
		background-position-x: 40%;
	}
	.subMenu {
		text-align: left;
	}
	/deep/ .el-qf-menu:not(.el-menu--collapse) {
		width: 200px;
		min-height: 500px;
	}
	//菜单文字样式
	/deep/ .el-menu-item,
	/deep/ .el-submenu__title {
		color: rgb(78, 91, 248);
		// font-weight: bold;
	}
	//菜单图标样式
	/deep/ .iconfont {
		color: rgb(78, 91, 248);
		font-weight: normal;
	}
	//菜单激活样式
	/deep/ .el-menu-item.is-active {
		color: rgb(228, 120, 51);
	}
	/deep/ .el-menu-item.is-active {
		color: rgb(228, 120, 51);
		.iconfont {
			color: rgb(228, 120, 51);
			font-weight: normal;
		}
	}
}

.el-main {
	background-color: #fff;
	color: #333;
	text-align: center;
	// line-height: 160px;
	.el-breadcrumb {
		margin-top: 20px;
		margin-bottom: 30px;
		// /deep/ .el-breadcrumb__inner {
		// 	color: #4e59e9!important;
		// }
		// /deep/ .is-link {
		// 	color:hotpink!important;
		// }
	}
}

.el-container {
	margin-bottom: 40px;
	height: 100%;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
// 顶栏laout
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
}
</style>
